<template>
    <div class="daily-article">
    
        <div class="daily-article-title">{{ data.title }}</div>
    
        <div class="daily-article-content" v-html="data.body"></div>
    
        <div class="daily-comments" v-show="comments.length">
    
            <span>评论（{{ comments.length }}）</span>
    
            <div class="daily-comment" v-for="comment in comments">
    
                <div class="daily-comment-avatar">
    
                    <img :src="comment.avatar">
    
                </div>
    
                <div class="daily-comment-content">
    
                    <div class="daily-comment-name">{{ comment.author }}</div>
    
                    <div class="daily-comment-time" v-time="comment.time"></div>
    
                    <div class="daily-comment-text">{{ comment.content }}</div>
    
                </div>
    
            </div>
    
        </div>
    
    </div>
</template>
<script>
    import Time from '../directives/time';
    
    import $ from '../libs/util';
    
    export default {
    
        directives: {
    
            Time
    
        },
    
        props: {
    
            id: {
    
                type: Number,
    
                default: 0
    
            }
    
        },
    
        data() {
    
            return {
    
                data: {},
    
                comments: []
    
            }
    
        },
    
        methods: {
    
            getArticle() {
    
                $.ajax.get('news/' + this.id).then(res => {
    
                    res.body = res.body
    
                        .replace(/src="http/g, 'src="' + $.imgPath + 'http');
    
                    res.body = res.body
    
                        .replace(/src="https/g, 'src="' + $.imgPath + 'https');
    
                    this.data = res;
    
                    window.scrollTo(0, 0);
    
                    this.getComments();
    
                })
    
            },
    
            getComments() {
    
                this.comments = [];
    
                $.ajax.get('story/' + this.id + '/short-comments').then(res => {
    
                    this.comments = res.comments.map(comment => {
    
                        // 将头像的图片地址转为代理地址
    
                        comment.avatar = $.imgPath + comment.avatar;
    
                        return comment;
    
                    });
    
                })
    
            }
    
        },
    
        watch: {
    
            id(val) {
    
                if (val) this.getArticle();
    
            }
    
        }
    
    };
</script>